<template>
  <!-- <h2>setup</h2>
<h3>{{count}}</h3>
<button @click="updateCount">按钮</button> -->
  <h3>名字:{{ user.name }}</h3>
  <h3>年龄:{{ user.age }}</h3>
  <h3>性别:{{ user.gender }}</h3>
  <h3>妻子:{{ user.wife.cars[0] }}</h3>
  <button @click="updateUser">更新数据</button>
</template>


<script lang="ts">
import { defineComponent, reactive, ref } from "vue";
export default defineComponent({
  name: "App",
  // data() {
  //   return {
  //     count:0
  //   }
  // },
  // methods:{
  //   updateCount() {
  //     this.count++
  //   }
  // }
  // setup() {
  //   let count = ref(0)
  //   console.log(count);

  //   function updateCount() {
  //     count.value++
  //   }
  //   return {
  //     count,
  //     updateCount,
  //   }
  // }
  setup() {
    const obj: any = {
      name: "小米",
      age: 20,
      wife: { cars: ["奔驰", "宝马"] },
    };
    const user = reactive(obj);
    console.log(user);

    const updateUser = () => {
      // user.name='小红'
      // obj.gender = '男'
      // user.gender = '男'
      // delete obj.age
      delete user.age;
    };
    return {
      user,
      updateUser,
    };
  },
});
</script>

<style>
</style>
